Geometric Loaders

May 2, 2018

Whenever I do a new app, I always search on the internet for new cool activity indicators. Recently I've decided to create my own personal activity indicators.

Here you can see what I've made

You can download the source code here

GeometricLoaders has a main class called GeometricLoader.swift. This class extends UIView and is responsible for creating the loader view and setting the size and position of the main view. We use the static method createGeometricLoader() to initialize the loader.

open static func createGeometricLoader() -> Self {

        let loader = self.init()
        loader.setupView()

        return loader
    }

internal func setupView() {

        guard let window = UIApplication.shared.delegate?.window else { return }
        guard let mainWindow = window else {return}

        self.frame = mainWindow.frame
        self.center = CGPoint(x: mainWindow.bounds.midX, y: mainWindow.bounds.midY)

        mainWindow.addSubview(self)

        self.loaderSuperview = mainWindow
        self.loaderView.frame = CGRect(x: frame.origin.x, y: frame.origin.y, width: frame.width/2, height: frame.width/2)
        self.loaderView.center = CGPoint(x: frame.width/2, y: frame.height/2)
        self.loaderView.backgroundColor = UIColor.clear
        self.isHidden = true
        self.addSubview(loaderView)

    }

Loaders (Infinity, Orbit, CirclesInMotion...) extend the GeometricLoader class. Once the Loader is created, just call startAnimation() to start the loader animation.

func startAnimation() {

        self.configureLoader()
        isHidden = false
        if superview == nil {
            loaderSuperview?.addSubview(self)
        }
    }

This method will configure the loader, add the loader elements to the layer of the loaderView and shows the loader's animation.

To stop the loader we call the stopAnimation() method.

func stopAnimation() {

        self.isHidden = false
        self.isAnimating = false
        self.removeFromSuperview()
        self.layer.removeAllAnimations()

    }

You can download the full project with a fully functional example here

And that's it!! If you use it I'll be happy to know about it.